<template>
  <div class="container login">
    <!-- <van-nav-bar
      title="店家注册"
    /> -->
    <div class="login-com">
    <div>
      <van-cell-group>
        <van-field
          label="手机号"
          placeholder="请输入手机号"
          v-model="Phone"
          required
           maxlength = '11'
          autocomplete="off"
        />
      </van-cell-group>
      <van-cell-group style="margin-top:10px;">
        <van-field
          label="密码"
          type="password"
          required
          placeholder="请输入密码"
          v-model="Password"
        />
      </van-cell-group>
      <van-cell-group style="margin-top:10px;">
        <van-field
          label="确认密码"
          type="password"
          placeholder="请再次输入密码"
          required
          v-model="Password2"
        />
      </van-cell-group>
      <van-cell-group style="margin-top:10px;">
        <van-field
          label="店铺名称"
          placeholder="请输入店铺名称"
          required
          v-model="UserName"
        />
      </van-cell-group>
      <van-cell-group style="margin-top:10px;">
        <van-field
          label="店铺楼层"
          placeholder="请选择店铺楼层"
          v-model="FloorText"
          required
          readonly
          @click="showFloor"
        />
      </van-cell-group>
      <van-cell-group style="margin-top:10px;">
        <van-field
          label="店铺类型"
          placeholder="请选择店铺类型"
          required
          readonly
          v-model="ShopType"
          @click="typeModal = true"
        />
      </van-cell-group>
      <van-cell-group style="margin-top:10px;">
        <van-field
          label="店铺门牌"
          placeholder="请输入店铺门牌"
          required
          v-model="Address"
        />
      </van-cell-group>
      <van-cell-group style="margin-top:10px;">
        <van-field
          v-model="ShopDetail"
          label="店铺简介"
          type="textarea"
          placeholder="请输入店铺简介"
          rows="1"
          required
          autosize
        />
      </van-cell-group>
      <van-cell-group style="margin-top:10px;">
        <div class="van-cell van-field">
          <div class="van-cell__title van-field__label">
            <span style="margin-left: -8px;"><span class="red" style="margin-right:2px;">*</span>店铺logo</span>
            </div>
            <div class="van-cell__value">
              <div class="van-field__body">
                 <van-uploader :after-read="afterRead" v-model="files" :max-count="1" >
                  </van-uploader>
                <span style="font-size:12px;color:#888;padding-left:5px;align-self: baseline;">建议上传比例为1:1的图片</span>
                </div>
                </div>
              </div>
      </van-cell-group>
      <div class="login-btn-row">
        <van-button type="danger" class="login-btn" @click="registered" :disabled="isdisabled">立即注册</van-button>
      </div>
    </div>
    </div>
    <!-- <van-action-sheet
      v-model="floorModal"
      :actions="floorList"
    /> -->
    <van-action-sheet v-model="floorModal" title="请选择楼层">
      <div class="floor-list van-hairline--top" v-for="(item,index) in floorList" :key="index" @click="selectFloor(item)">
        {{item.name}}
        <van-icon v-if="FloorText == item.name" class="select-icon" name="success" />
      </div>
    </van-action-sheet>
    <van-action-sheet v-model="typeModal" title="请选择类型">
      <div class="floor-list van-hairline--top" v-for="(item,index) in ShopTypeOption" :key="index" @click="selectType(item)">
        {{item}}
        <van-icon v-if="ShopType == item" class="select-icon" name="success" />
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import axios from 'axios';
import baaseUrl from '../../until/base'
export default {
  name: 'registered',
  data() {
    return {
      UserName:'',
      Phone:'',
      files:[],
      Password:'',
      Password2:'',
      FloorText:'',
      Floor:'',
      Address:'',
      ShopType:'',
      HeadUrl:'',
      openId:'',
      ShopDetail:'',
      isdisabled:false,
      floorModal: false,
      floorList: [
        { name: '1F' ,value:'1'},
        { name: '2F' ,value:'2'},
        { name: '3F' ,value:'3'},
        { name: '4F' ,value:'4'}
      ],
      ShopTypeOption:[],
      typeModal:false,
    }
  },
  mounted() {
    this.openId = this.$route.query.openId;
    console.log(this.$route.query.openId);
    this.getAllShopTypes()
  },
  methods: {    
    showFloor(){
      console.log('1111')
      this.floorModal = true;
    },
    selectFloor(item) {
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.floorModal = false;
      this.Floor = item.value;
      this.FloorText = item.name;
    },
    getAllShopTypes(){
      this.$api.mine.getAllShopTypes().then(res=> {
        if(res.IsSuccess){
          this.ShopTypeOption = res.Data;
        }
      })    
    },
    selectType(item){
      this.typeModal = false
      this.ShopType = item;
    },
    registered() {  
      if(this.Phone == ''){
        this.$toast('请输入手机号')
        return false;
      }else{
        var myreg=/^[1][3,4,5,7,8][0-9]{9}$/;  
          if (!myreg.test(this.Phone)) {  
              this.$toast('请输入有效的手机号');
              return false;
          }
      }
      if(this.Password == ''){
        this.$toast('请输入密码')
        return false;
      }else{
        if(this.Password.length < 6){
          this.$toast('密码长度至少为6位')
          return false;
        }
      }
      if(this.Password != this.Password2){
        this.$toast('两次输入的密码不一致')
        return false;
      }
      if(this.UserName == ''){
        this.$toast('请输入店铺名称')
        return false;
      } 
      if(this.Floor == ''){
        this.$toast('请选择店铺楼层')
        return false;
      } 
      if(this.ShopType == ''){
        this.$toast('请选择店铺类型')
        return false;
      } 
      if(this.Address == ''){
        this.$toast('请输入店铺门牌')
        return false;
      } 
      if(this.ShopDetail == ''){
        this.$toast('请选择店铺简介')
        return false;
      } 
      if(this.HeadUrl == ''){
        this.$toast('请上传店铺logo')
        return false;
      } 
      this.$api.login.companyUserRegister({        
          UserName:this.UserName,
          Phone:this.Phone,
          Password:this.Password,
          Floor:this.Floor,
          Address:this.Address,
          ShopType:this.ShopType,
          HeadUrl:this.HeadUrl,
          ShopDetail:this.ShopDetail,
          openId:this.openId
      }).then(res=> {
        if(res.IsSuccess){
          this.$toast.success('注册成功,请等待审核');
        }
      })    
    },
    confirmBirthday(){
      this.Birthday = this.changeBirthday;
      this.isShowSelectTime = false
    },
    birthdayChange(e){
      let endTimeArr = e.getValues();
      this.changeBirthday = `${endTimeArr[0]}-${endTimeArr[1]}-${endTimeArr[2]}`
    },
    afterRead(file) {
      this.isdisabled = true;
      this.$toast('正在上传...');
      let content = file.file
      let params = new FormData(); //创建form对象
      params.append("file", content);
      let base = ''
      if (process.env.NODE_ENV == 'development') {    
          base = baaseUrl.devUrl;
      } else if (process.env.NODE_ENV == 'debug') {    
          base = '';
      } else if (process.env.NODE_ENV == 'production') {    
          base = baaseUrl.proUrl;
      }
      let url = base +'/api/common/uploadImages';
      const instance=axios.create({
          withCredentials: true,
          headers: {
            'Content-Type': 'multipart/form-data',
            'authorization': localStorage.getItem("authorization") || '',
          }
         }) 
      instance.post(url,params)
        .then(res => {
          if(res.status == 200){
            this.$toast('上传成功')
            this.HeadUrl = res.data;
            this.isdisabled = false;
          }
        }, err => {
          console.log(err)
          // Toast('上传失败，图片是否过大?')
      })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.login {
  background-color: #f5f5f5;
  .login-com {
    padding: .533333rem;
  }
  .user-pic-row {
    margin-top: 1.6rem;
    padding-bottom: 1.066667rem;
    text-align: center;
  }
  .user-pic {
    border-radius: 50%;
    height: 2.133333rem;
    width: 2.133333rem;
  }
  .login-btn-row {
    text-align: center;
    .login-btn {
      width: 100%;
      margin-top: .533333rem;
      border-radius: .106667rem;
    }
  }
  .red{
    color:red;
  }
  .van-radio{
    margin-right: .266667rem;
  }
  .floor-list{
    text-align: center;
    font-size: .426667rem;
    padding: .266667rem;
    position: relative;
  }
  .select-icon{
    position: absolute;
    right: .266667rem;
    color: #f44;
  }
}
</style>